<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Updating Lifecycle</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

  const { Component } = React
  const { render } = ReactDOM

  class HiddenMessage extends Component {

      constructor(props) {
          super(props)
          this.state = {
              hidden: (props.hide) ? props.hide : true
          }
      }

      //
      // Solution
      //

      componentWillReceiveProps(nextProps) {
          this.setState({hidden: nextProps.hide})
      }

      render() {
          const { children } = this.props
          const { hidden } = this.state
          return (
              <p>
                  {(hidden) ?
                      children.replace(/[a-zA-Z0-9]/g, "x") :
                      children
                  }
              </p>
          )
      }

  }

  class HiddenMessages extends Component {

      constructor(props) {
          super(props)
          this.state = {
              messages: [
                  "The crow crows after midnight",
                  "Bring a watch and dark clothes to the spot",
                  "Jericho Jericho Go"
              ],
              showing: -1
          }
      }

      componentWillMount() {
          this.interval = setInterval(() => {
              this.setState(prevState => {
                let { showing, messages } = prevState
                showing = (++showing >= messages.length) ?
                  -1 : showing
                return {showing}
              })
          }, 1000)
      }

      componentWillUnmount() {
          clearInterval(this.interval)
      }

      render() {
          const { messages, showing } = this.state
          return (
              <div className="hidden-messages">
                  {messages.map((message, i) =>
                      <HiddenMessage key={i}
                                     hide={(i!==showing)}>
                          {message}
                      </HiddenMessage>
                  )}
              </div>
          )
      }
  }

  render(
      <HiddenMessages />,
      document.getElementById('react-container')
  )



  </script>
</body>
</html>
